<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="新增日志">
        <template #title>
            <span class="page-title">
                <i class="el-icon-sysOperationLog-solid" /> 系统设置
            </span>
        </template>
    </el-page-header>

    <el-card class="form-card">
        <div class="el-card__header">
            <h3 class="form-title" style="font-size: 14px; text-align: center">
                <i class="el-icon-edit" /> 新增日志
            </h3>
        </div>

        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="24">
                    <!--操作模块、业务类型、操作人员、部门名称、操作地点、主机地址-->
                    <el-form-item label="操作模块" prop="title">
                        <el-input v-model="form.title" placeholder="请输入操作模块" />
                    </el-form-item>

                    <el-form-item label="业务类型" prop="businessType">
                        <el-input v-model="form.businessType" placeholder="请输入业务类型" />
                    </el-form-item>

                    <el-form-item label="操作人员" prop="operatorName">
                        <el-input v-model="form.operatorName" placeholder="请输入操作人员" />
                    </el-form-item>

                    <el-form-item label="部门名称" prop="deptName">
                        <el-select v-model="form.deptName" placeholder="请选择部门" clearable style="width:100%">
                            <el-option label="技术部" value="1"></el-option>
                            <el-option label="产品部" value="2"></el-option>
                            <el-option label="运营部" value="3"></el-option>
                            <el-option label="运维部" value="4"></el-option>
                            <el-option label="销售部" value="5"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="操作地点" prop="operLocation">
                        <el-input v-model="form.operLocation" placeholder="请输入操作地点" />
                    </el-form-item>

                    <el-form-item label="主机地址" prop="operIp">
                        <el-input v-model="form.operIp" placeholder="请输入主机地址" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item class="form-actions">
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="submitForm" :loading="loading">新增</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from '@/utils/request';

export default {
    data() {
        return {
            loading: false,
            form: {
                title: '', // 操作模块
                businessType: '', // 业务类型
                operatorName: '', // 操作人员
                deptName: '', // 部门名称
                operLocation: '', // 操作地点
                operIp: '' // 主机地址 hostAddressdeptId:deptId
            },
            rules: {
                title: [
                    { required: true, message: '请输入操作模块', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                businessType: [
                    { required: true, message: '请输入业务类型', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                operatorName: [
                    { required: true, message: '请输入操作人员', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                deptName: [
                    { required: true, message: '请选择部门', trigger: 'blur' }
                ],
                operLocation: [
                    { required: true, message: '请输入操作地点', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                operIp: [
                    //
                    { required: true, message: '请输入主机地址', trigger: 'blur' },
                    { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '请输入正确的IP地址', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    axios.post('/sysOperationLog/saveOrUpdate', this.form)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.$message.success("日志新增成功");
                            this.resetForm();
                            this.$router.push('/apiSysOperationLog/list');
                        } else {
                            this.$message.error(response.data.message || '操作失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求错误:', error);
                        this.$message.error(error.response?.data?.message || '服务器错误');
                    });
                } else {
                    this.$message.warning('请填写完整的表单信息');
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            //this.form = { title: '', businessType: '', operatorName: '', deptName: '', operLocation: '', operIp: '' };
        }
    }
}
</script>

<style scoped>
.form-card {
  width: 600px;
  margin: 20px auto 0;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.el-card__header {
  padding: 12px 20px;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-row {
  margin: 0 -10px;
}

.el-col {
  padding: 0 10px;
}

.el-card__header {
  border-bottom: 1px solid #ebeef5;
  padding: 18px 20px;
}

.form-title {
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
}

.form-title i {
  margin-right: 8px;
  color: #409EFF;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item :deep(.el-form-item__label) {
  color: #606266;
  font-weight: 500;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>